<!doctype html>
<html class="no-js ">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<script src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/amazeui.min.js"></script>
		<style>
			#vld-tooltip {
				position: absolute;
				z-index: 1000;
				padding: 5px 10px;
				background: #F37B1D;
				min-width: 150px;
				color: #fff;
				transition: all 0.15s;
				box-shadow: 0 0 5px rgba(0, 0, 0, .15);
				display: none;
			}
			
			#vld-tooltip:before {
				position: absolute;
				top: -8px;
				left: 50%;
				width: 0;
				height: 0;
				margin-left: -8px;
				content: "";
				border-width: 0 8px 8px;
				border-color: transparent transparent #F37B1D;
				border-style: none inset solid;
			}
		</style>
	</head>

	<body style="background-color: #f5f5f5;">
		<div class="am-g" style="max-width: 1100px; margin-bottom: 80px;">
			<header class="am-topbar admin-header topbar-color headerbg" style="max-width: 1100px;margin-bottom: 10%;">
				<div class="am-topbar-brand">
					<strong><img src="assets/images/logo2.png">	</strong>

				</div>

			</header>
			<div class="am-u-md-7 am-text-center"><img src="http://hd.miku.cf/statics/images/login_bg.jpg" style="max-width: 100%;height: auto;"></div>
			<div class="am-u-md-5">

				<form class="am-g am-padding-sm" id="form-with-tooltip">
					<div class="am-g am-margin-top-sm ">
						<div class=" am-u-sm-7 am-md-text-left am-vertical-align-middle" style="font-size: 2.4rem;">
							会员登录
						</div>
						<div class=" am-u-sm-5 am-text-right" style="line-height: 3.2rem;">
							还没有帐号<a href="admin-regist.html" style="color: #F37B1D;">立即注册</a>
						</div>
					</div>
					<div class="am-g am-margin-top-sm am-form-group">
						<div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
							帐号
						</div>
						<div class="am-u-sm-12 am-u-md-9">
							<input type="text" class="am-form-field am-radius" type="text" id="doc-vld-name-2-0" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
						</div>
					</div>
					<div class="am-g am-margin-top-sm am-form-group">
						<div class="am-u-sm-12 am-u-md-3 am-md-text-right am-vertical-align-middle" style="font-size: 2.0rem;">
							密码
						</div>
						<div class="am-u-sm-12 am-u-md-9">
							<input type="text" class="am-form-field am-radius" type="password" id="doc-vld-pwd-1-0" placeholder="请输入密码" pattern="^\d{6}$" required data-foolish-msg="请输入密码" />
						</div>
					</div>
					
					<div class="am-g ">
						<div class=" am-u-sm-4 am-u-sm-offset-3 ">
							<div class="am-checkbox">
								<label>
									<input type="checkbox"> 保持登录
								</label>
							</div>
						</div>
					</div>
					
					
					<div class=" am-g ">
						<div class="am-u-md-1 am-hide-sm-only"></div>
						<div class=" am-u-sm-12 am-u-md-11 am-margin-bottom-sm">
							<button type="submit" class="am-btn am-btn-primary am-radius am-btn-block">登录</button>
						</div>

					</div>

				</form>

			</div>

		</div>
		<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }" style="position: fixed;bottom: 0;width: 100%;">

			<div class="am-footer-miscs">
				<p>由 <a href="http://www.yunshipei.com/" title="诺亚方舟" target="_blank" class="">学点网络</a> 提供技术支持</p>
				<p>CopyRight©2014 wuhanxd Inc.</p>
			</div>
		</footer>
	</body>
	<script language="JavaScript">
		$(function() {
			var $form = $('#form-with-tooltip');
			var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
			$tooltip.appendTo(document.body);
			$form.validator();
			var validator = $form.data('amui.validator');
			$form.on('focusin focusout', '.am-form-error input', function(e) {
				if (e.type === 'focusin') {
					var $this = $(this);
					var offset = $this.offset();
					var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));
					$tooltip.text(msg).show().css({
						left: offset.left + 10,
						top: offset.top + $(this).outerHeight() + 10
					});
				} else {
					$tooltip.hide();
				}
			});
		});
	</script>

</html>